<div data-controller="toggle accessibility" data-toggle-visibility-class="hidden" id="sort" class="relative">
  <button data-accessibility-target="button" type="button" class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900" data-action="toggle#toggle accessibility#toggleAriaExpanded" aria-expanded="false" aria-haspopup="true">
    <%= t(".sort.title") %>
    <%= inline_svg_tag "icons/solid/chevron_down.svg", class: "flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-gray-400 group-hover:text-gray-500", aria_hidden: true %>
  </button>

  <div data-toggle-target="element" class="hidden origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10" role="menu" aria-orientation="vertical" aria-labelledby="mobile-menu-button" tabindex="-1">
    <%= render SortButtonComponent.new(title: t(".sort.freshest"), name: :sort, value: :freshest, active: sort == :freshest, form_id: form_id, scope: scope) %>
    <%= render SortButtonComponent.new(title: t(".sort.newest"), name: :sort, value: :newest, active: sort == :newest, form_id: form_id, scope: scope) %>
  </div>
</div>
